<template>
  <div class="tabs">
    <a-tabs
      v-model="baseData.activeKey"
      @change="changeTab"
      :tabBarStyle="tabBarStyle"
    >
      <a-tab-pane v-for="pane in baseData.panes" :key="pane.id">
        <span slot="tab" @click="remove(pane.id)">
          {{pane.meta.title}}
          <a-icon v-if="pane.meta.title!='首页'" class="close" type="close"/>
          <a-icon v-else class="close-hidden" type="close"/>
        </span>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
export default {
  name: 'BaseTabs',
  props: ["baseData"],
  data() {
    return {
      tabBarStyle: {
        background: '#fff',
        margin: 0
      },
      closeKey: '',
      close: false,
    };
  },
  mounted() {
    
  },
  methods: {
    changeTab() {
      if (this.close) {
        this.close = false;
        this.baseData.activeKey = this.closeKey;
      }
    },
    remove(targetKey) {
      this.close = true;
      let activeKey = this.baseData.activeKey;
      let lastIndex;
      this.baseData.panes.forEach((pane, i) => {
        if (pane.key === targetKey) {
          lastIndex = i-1;
        }
      });
      const panes = this.baseData.panes.filter(pane => pane.key !== targetKey);
      if (panes.length && activeKey === targetKey) {
        if (lastIndex >= 0) {
          activeKey = panes[lastIndex].key;
        } else {
          activeKey = panes[0].key;
        }
      }
      this.baseData.panes = panes;
      this.baseData.activeKey = activeKey;
      this.closeKey = activeKey;
    },
  },
}
</script>

<style>
  .close {
    visibility: hidden;
  }
  .close-hidden {
    visibility: hidden;
  }
  span:hover .close {
    visibility: visible;
  }
  .tabs .ant-tabs-nav .ant-tabs-tab {
    padding-right: 0!important;
  }
</style>
